<template>
	<view class="flex-colume-start indexPage">
		<uni-swiper-dot v-if="banners.length > 0" mode="dot" :current="current" :info="banners" field="content">
			<swiper @change="bannerChange" class="swiper-box"  circular autoplay interval="4000">
				<swiper-item v-for="(item ,index) in banners" :key="index">
					<view @click="advItemClick(item)" class="swiper-item">
						<image class="banner-image" mode="aspectFill" lazy-load
							:src="item.image" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="flex-row-center time-box">
			<view class="time-box-left1">{{time}}</view>
			<view style="width: 1px; height: 50rpx; margin: auto 35rpx;background-color: rgb(230, 230, 230);"></view>
			<view class="flex-row-start time-box-right1">
				<view class="flex-colume-center">
					<view style="font-size: 20rpx;">
						<span class="words1">{{month}}</span>月<span class="words1">{{day}}</span>日
					</view>
					<view  class="flex-row-center time2">
						<view style="padding-left: 6rpx; padding-right: 3rpx; height: 20rpx; line-height: 20rpx; color: white; background-color: #DE2929;">辛丑.龙年</view>
						<view style="padding-left: 3rpx; padding-right: 6rpx;color: #DE2929;">九月廿七</view>
					</view>
					
					
				</view>
				<image src="/static/home/date1.png" style="margin-left: 10rpx; width: 90rpx; height: 64rpx;"></image>
				
			</view>
		</view>
		<view class="flex-colume-start today-bg1" style="padding-top: 5rpx; margin-top: 20rpx;">
			<view class="flex-row-center today-title-box">
				<view class="flex-row-center day1" @click="preDayBtnClick()">
					<image src="/static/arrow/arrow-white-left.png" mode="aspectFit"></image>
					<view>{{dayModel.day1}}</view>
				</view>
				<view style="margin-left: 30rpx; width: 1px; height: 30rpx; background-color: white;"></view>
				<view style="font-weight: 500; font-size: 28rpx; color: white; width: 350rpx; text-align: center;">{{dayModel.day0}}</view>
				<view style="margin-right: 30rpx; width: 1px; height: 30rpx; background-color: white;"></view>
				<view class="flex-row-center day1" @click="nextDayBtnClick()">
					<view>{{dayModel.day2}}</view>
					<image src="/static/arrow/arrow-white-right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="flex-colume-start item-big" v-for="(item,index) in dataArr" :key="index">
				<view class="flex-row-start item-big-header">
					<view class="flex-row-center item-big-header-left">
					</view>
					<view class="item-big-title">{{item.type_name}}</view>
				</view>
				<view class="flex-colume-start item12" v-for="(item1,index1) in item.son_list" :key="index1">
					<view v-if="index1 == 0" style="height: 30rpx;"></view>
					<view v-else style="height: 15rpx;"></view>
					<view class="flex-row-start title-box1">
						{{item1.title}}
						<view class="flex-row-center dot1">
							<view class="dot2"></view>
						</view>
					</view>
					<view v-if="index1 == item.son_list.length-1" style="height: 30rpx;"></view>
					<view v-if="(index == dataArr.length - 1) && (index1 == item.son_list.length-1)" style="height: 50rpx;"></view>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view style="height: calc(env(safe-area-inset-bottom) + 49px);"></view>
		
		
		<custom-tab-bar :selected="0"></custom-tab-bar>
	</view>
	
</template>

<script>
	import { userIndex, indexIndex, indexAdv } from '@/api/api'
	import { getDayWithFormat } from '@/api/timeUtil'
	export default {
		data() {
			return {
				current:0,
				time:'',//当前 时间
				month:'',//当前 月份
				day:'',//当前 日期
				banners:[],
				currentDate:undefined,
				dataArr:[],
				dayModel:{
					day1:'昨天',
					day0:'今天',
					day2:'明天'
				}
				
			}
		},
		onLoad(){
			var date = new Date()
			this._selDateStr = this.parseTime(date,'{y}-{m}-{d}')
			this._dayIndex = 0
			this.month = this.parseTime(date,'{m}')
			this.day = this.parseTime(date,'{d}')
			this.time = this.parseTime(date,'{h}:{i}:{s}')
			this.requestAdv()
			this.requestIndex(date)
			
			
			
		},
		methods: {
			preDayBtnClick(){
				this._dayIndex --
				this._selDateStr = getDayWithFormat(this._dayIndex,'{y}-{m}-{d}')
				if (this._selDateStr == this.parseTime(new Date(),'{y}-{m}-{d}')){
					this.dayModel = {
						day1:'昨天',
						day0:'今天',
						day2:'明天'
					}
				}else{
					this.dayModel = {
						day1:getDayWithFormat(this._dayIndex-1,'{m}-{d}'),
						day0:getDayWithFormat(this._dayIndex,'{m}-{d}'),
						day2:getDayWithFormat(this._dayIndex+1, '{m}-{d}')
					}
				}
		
				this.requestIndex()
				
			},
			nextDayBtnClick(){
				this._dayIndex ++
				this._selDateStr = getDayWithFormat(this._dayIndex,'{y}-{m}-{d}')
				if (this._selDateStr == this.parseTime(new Date(),'{y}-{m}-{d}')){
					this.dayModel = {
						day1:'昨天',
						day0:'今天',
						day2:'明天'
					}
				}else{
					this.dayModel = {
						day1:getDayWithFormat(this._dayIndex-1,'{m}-{d}'),
						day0:getDayWithFormat(this._dayIndex,'{m}-{d}'),
						day2:getDayWithFormat(this._dayIndex+1, '{m}-{d}')
					}
				}
				
				this.requestIndex()
				
			},
			requestIndex(){
				indexIndex({}).then(res=>{
				})
				uni.showLoading({
					mask:true
				})
				userIndex({date:this._selDateStr}).then(res=>{
					uni.hideLoading()
					if (res.code == 200){
						this.dataArr = res.data.list
					}
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			requestAdv(){
				indexAdv().then(res=>{
					if (res.code == 200){
						this.banners = res.data
					}
					
				})
				
			},
			advItemClick(item){
				
			},

			bannerChange(e){
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box{
		font-size: 0px;
		width: 750rpx;
		height: 405rpx;
		.swiper-item{
			width: 750rpx;
			height: 405rpx;
		}
		.banner-image{
			width: 750rpx;
			height: 405rpx;
			
		}
	}
	.time-box{
		font-size: 0px;
		width: 680rpx;
		height: 115rpx;
		background-color: white;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		.time-box-left1{
			font-family: MiSans;
			font-weight: 600;
			font-size: 70rpx;
			color: #DE2929;
		}
		.words1{
			font-size: 28rpx;
			font-weight: 500;
			margin: auto 2rpx;
		}
		.time2{
			margin-top: 5rpx;
			font-size: 12rpx;
			background-color: white;
			border-radius: 40rpx;
			height: 22rpx;
			border: 1px solid #DE2929;

			overflow: hidden;
		}
	}
	.today-bg1{
		font-size: 0px;
		width: 680rpx;
		// height: 519rpx;
		background: url('https://app.yiheshuyuan.cn/static/weixin/xcxPic/home-bg1.png');
		background-size: 100% 4170rpx;
		background-repeat: no-repeat;
		.today-title-box{
			height: 80rpx;
			width: 100%;
			.day1{
				height: 45rpx;
				font-size: 0px;
				color: white;
				image{
					width: 55rpx;
					height: 30rpx;
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					
				}
				
				view{
					font-size: 26rpx;
				}
				
			}
		}
		.item-big{
			width: 640rpx;
			// margin-bottom: 20rpx;
			.item12{
				align-items: flex-start;
				margin-left: 32rpx;
				width: calc(100% - 32rpx);
				border-left: 4rpx solid #DE2929;
				
				.title-box1{
					position: relative;
					height: 46rpx;
					color: rgb(153, 153, 153);
					font-size: 26rpx;
					padding-left: 20rpx;
					
					.dot1{
						position: absolute;
						left: -10rpx;
						top: 15rpx;
						width: 16rpx;
						height: 16rpx;
						border-radius: 16rpx;
						background-color: #DE2929;
						.dot2{
							background-color: white;
							width: 12rpx;
							height: 12rpx;
							border-radius: 12rpx;
						}
						
					}
				}
			}
		}
		.item-big-header{
			margin-left: 30rpx;
			width: calc(100% - 30rpx);
			height: 70rpx;
			background-color: rgb(230, 230, 230);
			border-radius: 16rpx;
			position: relative;
			.item-big-header-left{
				position: absolute;
				left: -35rpx;
				top: -2rpx;
				width: 74rpx;
				height: 74rpx;
				background-color: rgb(230, 230, 230);
				border-radius: 80rpx;
				border: 1px solid white;
			}
			.item-big-title{
				padding-left: 70rpx; 
				font-size: 28rpx;
				font-family: MiSans;
				font-weight: 600;
				color: #DE2929;
			}
			
		}
		
	}

</style>
